<template>
  <div class="index-box d-flex" ref="index">
    <div class="table-box" >

      <div class="actionBtn" ref="actionBtn">
        <div class="actionBtnLeft d-flex align-center">

           <el-button @click="back()" size="small">返回</el-button>
        </div>
        <div class="actionBtnRight">
           <MyRefresh/>

        </div>
      </div>
      <div class="table" ref="table">
        <el-table :data="dataList" style="width: 100%;" row-key="id" border :height="tableHeight" default-expand-all stripe v-loading="loading">
          <el-table-column prop="name" label="评价图片" v-if="!hideTableColumn.includes('img')" align="center">
           <template #default="scope">
              <el-image :src="item.fullFilename" v-for="item in scope.row.attachmentInfoList" fit="fill" v-image-preview  class="img" style="margin-right: 10px;"></el-image>
           </template>
          </el-table-column>
          <el-table-column prop="nickname" label="评价用户名" v-if="!hideTableColumn.includes('name')" width="200" align="center"></el-table-column>
          <el-table-column prop="telephone" label="评价用户手机号" v-if="!hideTableColumn.includes('platformFor')"  align="center"></el-table-column>
          <el-table-column prop="replyContent" label="评价类型" v-if="!hideTableColumn.includes('platformFor')"  align="center">
            <template #default="scope">
               <span v-if="scope.row.evaluationSource==1">用户</span>
               <span v-else-if="scope.row.evaluationSource==2">系统</span>
            </template>
          </el-table-column>
          <el-table-column prop="storeName" label="商品评分" v-if="!hideTableColumn.includes('shopName')" align="center">
            <template #default="scope">
               <span>{{scope.row.scoreLevel | scoreText}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="storeTypeName" label="物流服务" v-if="!hideTableColumn.includes('shopType')" align="center">
            <template #default="scope">
               <span>{{scope.row.logisticsLevel | scoreText}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="storeTypeName" label="服务态度" v-if="!hideTableColumn.includes('shopType')" align="center">
            <template #default="scope">
               <span>{{scope.row.serviceLevel | scoreText}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="goodsEvaluate" label="评价内容" v-if="!hideTableColumn.includes('shopType')" align="center"  width="200" show-overflow-tooltip></el-table-column>
          <el-table-column prop="addTime" label="添加时间" v-if="!hideTableColumn.includes('shopType')" align="center">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="replyContent" label="回复内容" v-if="!hideTableColumn.includes('shopType')" align="center"  width="200" show-overflow-tooltip></el-table-column>
          <el-table-column prop="name" label="操作" v-if="!hideTableColumn.includes('active')" width="140" align="center" fixed="right">
            <template #default="scope">
              <div class="verticalBtn">
              <el-button
                v-if="!scope.row.replyContent"
                type="text"
                icon="el-icon-service"
                @click="handleReply(scope.row)"
              >回复</el-button>
              <el-button
                type="text"
                icon="el-icon-delete-solid"
                @click="handleDelt(scope.row)"
              >删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page" ref="page">
         <MyPagination
           :total="total"
           :page.sync="searchForm.pageNum"
           :limit.sync="searchForm.pageSize"
           @pagination="dataInfo"
         />

      </div>
    </div>

    <!-- 回复评价 -->
    <el-dialog :title="'对用户手机号'+statusRow.telephone+'的回复'" width="600px" :close-on-click-modal="false" v-dialogDrag :visible.sync="replyVisible" @close="replyVisible = false">
      <div>
        <el-input
          type="textarea"
          :rows="5"
          placeholder="请输入回复内容"
          v-model="replyForm.replyContent">
        </el-input>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="replyVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="handleSubmitReply" size="small" :loading="btnLoading">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import common from '@/api/api';
  import { getEvaluationList,addReplyContent,removeEvaluation } from '@/api/getData';
  import option from '../../common/option.js';
  export default {
    data() {
      return {
        loading: false,
        btnLoading: false,
        leftTreeShow:true,
        searchForm: {
          goodsId:'',
          pageNum: 1,
          pageSize: 20,
        },
        dataList:[],
        hideTableColumn:[],
        total: 0,
        tableHeight:0,//table 高度
        multipleSelection: '',
        statusRow:{},
        replyVisible:false,
        replyForm:{
          evaluationId:'',
          replyContent :''
        }
      }
    },
    computed: {
      pickerOptions: () => {
        return option.pickerOptions;
      }
    },
    filters:{
      scoreText:function(score){
        if(!score) return '';
        if(score=='1'){
          return '非常差(1颗星)'
        }else if(score=='2'){
          return '差(2颗星)'
        }else if(score=='3'){
          return '一般(3颗星)'
        }else if(score=='4'){
          return '好(4颗星)'
        }else if(score=='5'){
          return '非常好(5颗星)'
        }
      }
    },
    mounted() {
      this.searchForm.goodsId = this.$route.query.goodsId;
      this.dataInfo();
      this.$nextTick(() => {
          this.tableHeight = this.$refs.index.offsetHeight  - this.$refs.actionBtn.offsetHeight - this.$refs.page.offsetHeight - 55;
      })
    },
    methods: {
      /** 删除当前列 **/
      handleDelt(row){
          this.$confirm('您确定要删除吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            removeEvaluation({evaluationId:row.evaluationId }).then((result) => {
              if (result.code == '200') {
                   this.dataInfo();
                   this.$message({
                     message: result.msg,
                     type: 'success'
                   });
               }else{
                  this.$message.error(result.msg);
               }
           });
          }).catch((err) => {
              console.log(err);
          });
      },
      handleReply(row){
        this.statusRow = row;
        this.replyForm.evaluationId = row.evaluationId;
        this.replyForm.replyContent = '';
        this.replyVisible = true;
      },
      async handleSubmitReply(){
        try {
          if(!this.replyForm.replyContent){
            this.$message.warning('请输入回复内容');
            return;
          }
          this.btnLoading = true;
          const result = await addReplyContent(this.replyForm);
          if (result.code == 200) {
            this.dataInfo();
            this.replyVisible = false;
          } else {
            this.$message.error(result.msg);
          }
          this.btnLoading = false;
        } catch (err) {
          this.btnLoading = false;
          console.log(err)
        }
      },
      back(){
          this.$router.go(-1);//返回上一层
      },
      async dataInfo() {
        try {
          this.loading = true;
          const result = await getEvaluationList(this.searchForm);
          if (result.code == 200) {
            this.total = result.total;
            this.dataList = result.rows;
          } else {
            this.$message.error(result.msg);
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },
      handleSearch() {
        this.searchForm.page = 1;
        this.dataInfo();
      }
    }
  }
</script>

<style scoped lang="scss">
  .index-box{
    padding:15px!important;
    margin-left:0px;
  }
  .table-box{
    width: 100%;
  }
</style>
